<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        异步操作

        1.fs 文件操作
            require('fs').readFile('./1.txt', (err,data)=>{})

        2.数据库操作

        3.AJAX

        4.定时器
        setTimeout(()=>{}, 1000)

        1.promise的状态
            实例对象中的一个属性 PromiseState
            pending 未决定的
            resolved / fullfilled 成功  
            rejected 失败

        2.promise对象的值
            实例对象中的另一个属性 PromiseResult
            保存着异步任务 成功/失败 的结果
            resolve
            reject
     -->


     <div class="container">
        <h2>初体验</h2>
        <button id="btn">点击抽奖</button>
     </div>

     <script>
        function rand(m,n) {
            return Math.ceil(Math.random() * (n-m+1)) + m-1
        }
        // 获取dom元素
        const btn = document.querySelector('#btn')

        //绑定单击事件
        btn.addEventListener('click', function(){

            // setTimeout(()=>{
            //     let n = rand(1,100)
            //     if(n<=30) {
            //         alert('中奖了')
            //     }else {
            //         alert('再接再厉')
            //     }
            // },1000)

            // Promise形式实现
                // resolve 解决 函数类型的数据
                // reject 拒绝 函数类型的数据
            // 参数是一个函数类型的参数, 在里面包裹一个异步操作,
            // 如果成功,则调 resolve。失败,则调 reject。
            // 它们可以修改Promise对象的状态
            // 通过then方法指定成功或失败的回调。成功调用第一个回调函数,失败了执行第二个回调函数。

            const p = new Promise((resolve, reject)=> {
                setTimeout(()=>{
                    let n = rand(1,100)
                    if(n<=30) {
                        resolve(n) //将 promise对象的状态设置为成功
                    }else {
                       reject(n) //将 promise对象的状态设置为失败
                    }
                },1000)
            })
            p.then(value=>{
                console.log(value)
                alert(`中奖了, 数字为 ${value}`)
            },reason=>{
                console.log(reason)
                alert(`失败了, 数字为 ${value}`)
            })
        })

        




     </script>



</body>
</html>